import { defineComponent } from 'vue';
import { terminalHelpTipProps } from '@/main/js/terminalAttribute';

export default defineComponent({
  props: {
    ...terminalHelpTipProps()
  },
  setup(props) {
    return () => (
      <div>
        <header class='t-help-tip-header'>{props.tipTitle}</header>
        <div class='t-help-tip-content'>
          {props.tipCommand.example.map((item, idx) => (
            <div key={item.cmd}>
              <div class='t-cmd-help-eg'>eg{idx + 1}:</div>
              <div class='t-cmd-help-example'>
                <ul class='t-example-ul'>
                  <li class='t-example-li'>
                    <code class='t-code-inline'>{item.cmd}</code>
                  </li>
                  <li class='t-example-li'>
                    <span></span>
                  </li>
                  {!!item.des && (
                    <li class='t-example-li'>
                      <span>{item.des}</span>
                    </li>
                  )}
                </ul>
              </div>
            </div>
          ))}
        </div>
      </div>
    );
  }
});
